// @ts-nocheck
import React, { Component } from 'react';
import './index.css';
import './index.less';
import { TextArea, Popup, Ellipsis, Toast } from 'antd-mobile';
import { LikeOutline, MessageOutline } from 'antd-mobile-icons';
import server from '@/utlis/server';
import one from '../plaza/img/0.png';
import aa from '../plaza/img/1.png';
import bb from '../plaza/img/2.png';
import cc from '../plaza/img/4.png';
import 'lib-flexible';
import jwtDecode from 'jwt-decode';
import axios from 'axios';

export default class index extends Component {
  state = {
    imga: [one, aa, bb],
    pinludata: [],
    isshow: false,
    value: '',
    visible: false,
    item: {},
    discover: {},
    context: '',
  };
  // 讨论数据
  getpinludata = async () => {
    let { data } = await server.get('/bottomtui');
    // console.log(data);

    data.data.forEach((c) => {
      c.isshow = false;
      c.fabuisshow = false;
    });
    this.setState({
      pinludata: [...data.data],
    });
  };

  componentDidMount(): void {
    this.getpinludata();
  }

  addtitlepin = async (item) => {
    // console.log(item)
    let token = localStorage.getItem('token');
    if (token) {
      let userlon = jwtDecode(token)._doc;
      let user = {
        _id: userlon._id,
        username: userlon.username,
        img: userlon.img,
      };

      // console.log(user);
      let form = {
        user: user,
        context: this.state.value,
        discover_id: item?._id,
      };
      let { data } = await server.post('/addtitlepin', form);
      // console.log(data);
      this.getpinludata();
    }
  };

  huifu(item, discover) {
    // console.log(discover, '1111');
    // console.log(item);
    this.setState({
      visible: true,
      item: { ...item },
      discover: { ...discover },
    });
  }

  chkchildren(item, user, discover_id): void {
    let users = {};
    let { _id, context, children } = item;
    if (!children) {
      return (
        <div key={_id} className="child-1">
          <img
            src={item.user.img}
            alt=""
            style={{ width: '30px', height: '30px' }}
          />
          <div className="child-1-1">
            <span style={{ fontSize: '0.05rem' }}>
              {user?.username} {user?.username ? '回复' : ''}
              {item.user.username}
            </span>
            <p className="pincontext">
              {item.context}
              <button
                className="huifubtn"
                onClick={() => {
                  this.huifu(item, discover_id);
                }}
              >
                回复
              </button>
            </p>
          </div>
        </div>
      );
    }
    let childComments = children.map((ele) => {
      users = ele.user;
      return this.chkchildren(ele, ele.user, discover_id);
    });

    return (
      <div key={_id} className="pin1">
        <div className="pin1_user">
          <img
            src={item.user.img}
            alt=""
            style={{ width: '30px', height: '30px' }}
          />
          <div className="pin1_user1">
            <span>{item.user.username}</span>
            <p className="pincontext">
              {context}
              <button
                className="huifubtn"
                onClick={() => {
                  this.huifu(item, discover_id);
                }}
              >
                回复
              </button>
            </p>
          </div>
        </div>
        <div className="child-comments">{childComments}</div>
      </div>
    );
  }

  dels = (idx) => {
    server.post('/delpinlun', { id: idx });
    Toast.show({
      icon: 'success',
      content: '删除成功',
    });
    this.getpinludata();
    this.setState({
      visible: false,
      context: '',
      item: {},
      discover: {},
    });
  };

  render() {
    const imga = this.state.imga;
    // console.log(this.state.pinludata);
    return (
      <div>
        {this.state.pinludata.map((item) => {
          return (
            <div key={item._id}>
              <header className="head">
                <img src={item.user.img} alt="" />
                <div className="name">
                  <span>{item.user.username}</span>
                  <p>{item.time}</p>
                </div>
              </header>
              <div className="content">
                <Ellipsis
                  direction="end"
                  content={item.title}
                  expandText="展开"
                  collapseText="收起"
                />

                <div className="image">
                  {item.imgs.map((item, index) => {
                    return <img key={index} src={item} alt="" />;
                  })}
                </div>
              </div>
              <div className="bottom">
                <button>
                  <LikeOutline />
                  {item.numberOfLikes.length}
                </button>
                <button>
                  <MessageOutline
                    onClick={() => {
                      // console.log(item, 2313213);
                      if (item.children.length == 0) {
                        // console.log(item);
                        this.state.pinludata.forEach((c) => {
                          if (c._id == item._id) {
                            c.fabuisshow = !c.fabuisshow;
                          }
                        });
                        this.setState({
                          pinludata: [...this.state.pinludata],
                        });
                      } else {
                        this.state.pinludata.forEach((c) => {
                          c.fabuisshow = false;
                          if (c._id == item._id) {
                            c.isshow = !c.isshow;
                          }
                        });
                        this.setState({
                          pinludata: [...this.state.pinludata],
                        });
                      }
                    }}
                  />
                  {item.critics_id.length}
                </button>
              </div>
              <div
                className="fabupin"
                style={{
                  display: item.fabuisshow ? 'block' : 'none',
                  marginBottom: '5px',
                }}
              >
                <TextArea
                  value={this.state.value}
                  placeholder="请输入标题"
                  onChange={(v) => {
                    this.setState({ value: v });
                  }}
                />
                <button
                  onClick={() => {
                    this.addtitlepin(item);
                  }}
                >
                  发布评论
                </button>
              </div>
              <div
                className="pinlun"
                ref={'pinlun'}
                style={{ display: item.isshow ? 'block' : 'none' }}
              >
                {item.children.map((elem) => {
                  return this.chkchildren(elem, {}, item);
                })}
              </div>
            </div>
          );
        })}

        <Popup
          visible={this.state.visible}
          onMaskClick={() => {
            this.setState({
              visible: false,
            });
          }}
          bodyStyle={{
            borderTopLeftRadius: '8px',
            borderTopRightRadius: '8px',
            minHeight: '40vh',
          }}
        >
          <TextArea
            value={this.state.context}
            placeholder="请输入标题"
            onChange={(v) => {
              this.setState({ context: v });
            }}
          />
          <button
            onClick={async () => {
              let token = localStorage.getItem('token');
              let userlon = jwtDecode(token)._doc;
              let user = {
                _id: userlon._id,
                username: userlon.username,
                img: userlon.img,
              };
              // console.log(this.state.item._id, 'idddd');
              let foem = {
                user: user,
                context: this.state.context,
                order_id: this.state.item._id,
                discover_id: this.state.discover._id,
              };
              // console.log(foem, 'xxxx');
              let { data } = await server.post('/addtitlepin', foem);
              this.getpinludata();
              this.setState({
                visible: false,
                context: '',
                item: {},
                discover: {},
              });
            }}
          >
            发布评论2
          </button>
          <button
            onClick={() => {
              this.dels(this.state.item._id);
            }}
          >
            删除
          </button>
        </Popup>
      </div>
    );
  }
}
